<template>
	<view class="content">
<!-- 		<view class="top">
			<view class="title">
				<text>古美路店</text>
			</view>
		</view> -->
		
		<view class="info-rest">
				<view class="info-rest-title">
					改单规则
				</view>
				<view class="info-rest-title">
					每个订单用户和宠物家分店总计，只能修改一次
				</view>
				<view class="info-rest-title">
					修改订单后的服务时间，不能超过优惠券过期时间和门店优惠时间
				</view>
				<view class="info-rest-title">
					如有疑问请咨询客服:400-030-0011
				</view>
				
				
				
				
			
		</view>
		<view class="info">
			
		
		<view class="info-xz">
			<view class="times-sk" :class="'select-on'">
				<!-- <text>sd</text> -->
			<!-- 	<view class="u-icons">
					<u-icon name="clock" color="#605F5F" size="20"></u-icon>
				</view> -->
				
				<text>指定时间</text> 
			</view>
			<view >
				指定美容师
			</view>
		</view>
		<view class="info-data">
			<view class="info-data-item info-data-select">
				<view>星期天</view>
				<view>1月10日</view>
			</view>
			<view class="info-data-item info-data-select">
				<view>星期天</view>
				<view>1月10日</view>
			</view>
			<view class="info-data-item info-data-select">
				<view>星期天</view>
				<view>1月10日</view>
			</view>
			<view class="info-data-item info-data-select">
				<view class="select-w">星期天</view>
				<view class="select-w">1月10日</view>
			</view>
			<view class="info-data-item info-data-select">
				<view class="select-w">星期天</view>
				<view class="select-w">1月10日</view>
			</view>
		</view>
		
		<view class="info-time">
			<view class="info-time-item">
				
				<view class="info-time-item-k info-time-item-select">
					<text>9</text>
					<text class="info-time-item-k-d">点</text>
				</view>
				<view class="info-time-item-k info-time-item-select">
					<text>9</text>
					<text class="info-time-item-k-d">点</text>
				</view>
				<view class="info-time-item-k info-time-item-select">
					<text>9</text>
					<text class="info-time-item-k-d">点</text>
				</view>
				<view class="info-time-item-k info-time-item-select">
					<text>9</text>
					<text class="info-time-item-k-d">点</text>
				</view>
				<view class="info-time-item-k info-time-item-select">
					<text>9</text>
					<text class="info-time-item-k-d">点</text>
				</view>
				<view class="info-time-item-k info-time-item-select">
					<text>9</text>
					<text class="info-time-item-k-d">点</text>
				</view>
				<view class="info-time-item-k info-time-item-select">
					<text>9</text>
					<text class="info-time-item-k-d">点</text>
				</view>
				<view class="info-time-item-k info-time-item-select">
					<text>9</text>
					<text class="info-time-item-k-d">点</text>
				</view>
				<!-- <view >
					10点
				</view>
				<view >
					11点
				</view>
				<view >
					12点
				</view> -->
			</view>
			<!-- <view class="info-time-item-in">
				<view class="select-time">
					9:00
				</view>
				<view class="select-time">
					9:10
				</view>
				<view class="select-time">
					9:20
				</view>
				<view class="select-time">
					9:30
				</view>
				<view class="select-time">
					9:40
				</view>
				<view class="select-time">
					9:50
				</view>
			</view> -->
			
		</view>
		
	
		
		
		
		
		</view>
		
		<view class="tame">
			<view class="tame-item">
				<view class="tame-item-icon">
					<image src="/static/user/wd_5.jpg" ></image>
				</view>
				<view class="tame-item-yy">
					上次预约
				</view>
				<view class="tame-item-title">
					<view class="tame-item-name">
						撒大网
					</view>
					<view class="tame-item-add">
						<u-icon name="plus" color="#ffffff" size="10"></u-icon>
					</view>
				</view>
			</view>
			<view class="tame-item">
				<view class="tame-item-icon">
					<image src="/static/user/wd_5.jpg" ></image>
				</view>
				<view class="tame-item-yy">
					上次预约
				</view>
				<view class="tame-item-title">
					<view class="tame-item-name">
						撒大网
					</view>
					<view class="tame-item-add">
						<u-icon name="plus" color="#ffffff" size="10"></u-icon>
					</view>
				</view>
			</view>
			<view class="tame-item">
				<view class="tame-item-icon">
					<image src="/static/user/wd_5.jpg" ></image>
				</view>
				<view class="tame-item-yy">
					上次预约
				</view>
				<view class="tame-item-title">
					<view class="tame-item-name">
						撒大网
					</view>
					<view class="tame-item-add">
						<u-icon name="plus" color="#ffffff" size="10"></u-icon>
					</view>
				</view>
			</view>
			<view class="tame-item">
				<view class="tame-item-icon">
					<image src="/static/user/wd_5.jpg" ></image>
				</view>
				<view class="tame-item-yy">
					上次预约
				</view>
				<view class="tame-item-title">
					<view class="tame-item-name">
						撒大网
					</view>
					<view class="tame-item-add">
						<u-icon name="plus" color="#ffffff" size="10"></u-icon>
					</view>
				</view>
			</view>
		</view>
		
		
		<view class="food-bt">
			<view class="foot-bt-num">
				<text class="red">￥</text>
				<text>233.23</text>
				<text class="red">起</text>
			</view>
			<view class="bt-next">
				下一步
			</view>
		</view>
	</view>
</template>

<script>
	export default {
	  name: "orderedit",
	  data() {
		  return {
			checked:false,
			
			
		  }
	  },
	  onLoad(options) {
		  // console.log(JSON.parse(options.item))
		
			
		
	  },
	  onReady() {
		  
	  		
	  	},
			
		methods:{
		}
	}
</script>

<style scoped lang="scss">
	.content{
		padding-top: 20rpx;
	}
	.info-rest{
		width: 684rpx;
		height: 206rpx;
		margin: 0 auto;
		border: 3rpx solid #AFAFAF;
		border-radius: 35rpx;
		box-sizing: border-box;
		padding: 30rpx 30rpx;
		font-size: 20rpx;
		color: #AFAFAF;
		view{
			line-height: 40rpx;
		}
	}
	.info{
		margin-top: 34rpx;
			
		.info-xz{
			width: 480rpx;
			height: 56rpx;
			
			opacity: 1;
			margin-left: 39rpx;
			display: flex;
			justify-content: space-between;
			text-align: center;
			align-items: center;
			// border-radius: 25rpx;
			.times-sk{
				width: 210rpx;
				
				// padding: 0 55rpx;
				box-sizing: border-box;
				text-align: center;
				line-height: 56rpx;
				
			}
			view{
				border-radius: 15rpx;
				width: 210rpx;
				height: 56rpx;
				text-align: center;
				opacity: 1;
				line-height: 56rpx;
				color: #605F5F;
				box-shadow: 0rpx 8rpx 12rpx 0rpx rgba(1,7,19,0.3);
			}
			.select-on{
				background: #FA623D;
				color: #FFFFFF;
			}
			
		}
		
		.info-data{
			width: 750rpx;
			padding: 32rpx 21rpx;
			display: flex;
			box-sizing: border-box;
			justify-content: space-between;
			margin-top: 31rpx;
			border-radius: 25rpx;
			box-shadow: 0rpx 8rpx 12rpx 0rpx rgba(1,7,19,0.3);
			.info-data-item{
				width: 131rpx;
				height: 106rpx;
				background: #ffffff;
				opacity: 1;
				border: 1rpx solid #CCCCCC;
				border-radius: 15rpx;
				text-align: center;
					color: #353535 ;
				view:first-child{
					width: 100%;
					font-size: 33rpx;
					// color: #353535;
					line-height: 46rpx;
					padding-top: 14rpx;
					
				}
				view:last-child{
					font-size: 24rpx;
					// color: #353535;
					line-height: 34rpx;
					padding-top: 2rpx;
					
					
				}
				
				
				
			}
			.info-data-select{
				// background: #FA623D;
				color:  #FA623D !important;
				
			}
			
		}
		.info-time{
			width: 750rpx;
			padding-top: 15rpx;
			.info-time-item{
				width: 100%;
				box-sizing: border-box;
				padding: 0 39rpx;
				display: flex;
				margin-top: 24rpx;
				justify-content: space-between;
				align-items: center;
				flex-wrap: wrap;
				.info-time-item-k{
					width: 80rpx;
					height: 80rpx;
					background: #FFFFFF;
					opacity: 1;
					margin: 15rpx 8rpx;
					
					border: 1rpx solid #CCCCCC;
					line-height: 80rpx;
					text-align: center;
					font-size: 34rpx;
					color: #515151;
					border-radius: 50%;
					// vertical-align: top;
					.info-time-item-k-d{
						font-size: 12rpx;
						display: inline-block;
						vertical-align: top;
						margin-top: -6px;
						margin-left: 5rpx;
						
					}
					
				}
				.info-time-item-select{
					border: 3rpx solid #FA623D;
					color: #000000;
				}
			}
			.info-time-item-in{
				width: 100%;
				box-sizing: border-box;
				padding: 9rpx 39rpx 6rpx;
				display: flex;
				background: #DCDCDC;
				justify-content: space-between;
				flex-wrap: wrap;
				border-radius: 15rpx;
				margin-top: 28rpx;
				view{
					width: 214rpx;
					height: 75rpx;
					background: #FFFFFF;
					opacity: 1;	
					font-size: 33rpx;
					color: #515151;
					line-height: 75rpx;
					text-align: center;
					border-radius: 15rpx;
					margin-bottom: 13rpx;
				}
			}
		}
		
		
		
		
	}
	.tame{
		margin-top: 26rpx;
		width: 750rpx;
		height: auto;
		display: flex;
		justify-content: space-between;
		padding: 0rpx 37rpx;
		flex-wrap: wrap;
			
		.tame-item{
			width: 213rpx;
			height: 321rpx;
			box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(1,7,19,0.2);
			border-radius: 15rpx;
			padding-top: 40rpx;
			margin-bottom: 20rpx;
			background-color: white;
				
			.tame-item-icon{
				width: 160rpx;
				height: 160rpx;
				margin: 0 auto;
				border-radius: 50%;
				overflow: hidden;
				image{
					width: 160rpx;
					height: 160rpx;
				}
			}
			.tame-item-yy{
				font-size: 26rpx;
				width: 140rpx;
				height: 50rpx;
				margin: -25rpx auto 0;
				line-height: 50rpx;
				text-align: center;
				color: #848484;
				border: 1rpx solid #848484;
				position: relative;
				background-color: white;
				
			}
			.tame-item-title{
				display: flex;
				justify-content: space-between;
				padding: 0 20rpx;
				.tame-item-name{
					margin-top: 40rpx;
					font-size: 30rpx;
				}
				.tame-item-add{
					margin-top: 35rpx;
					width: 40rpx;
					height: 40rpx;
					background-color: #F49090;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
		
	}
	.food-bt{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 147rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		display: flex;
		justify-content: space-between;
		padding-left: 42rpx;
		padding-right: 36rpx;
		align-items: center;
		
		.foot-bt-num{
			display: flex;
			align-items: flex-end;
			font-size: 44rpx;
			color: #FA623D;
			// height: 44rpx;
			line-height: 44rpx;
			.red{
				font-size: 22rpx;
				line-height: 22rpx;
				padding-bottom: 5rpx;
			}
		}
		.bt-next{
			width: 172rpx;
			height: 53rpx;
			background: #F55334;
			opacity: 1;
			font-size: 26rpx;
			color: #FFFFFF;
			line-height: 53rpx;
			text-align: center;
			border-radius: 35rpx;
		}
	}
	
	
	
</style>